<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Responsive drawer</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/HamburgerMenuButton.js"></script>

    <style>
      body {
        padding: 0;
      }

      .demo {
        display: block;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo">
      <style>
        header {
          background: #e0e0e0;
          position: sticky;
          top: 0;
        }

        header,
        #sideNavigation {
          display: flex;
          font-size: 16px;
        }

        #sideNavigation {
          bottom: 0;
          box-sizing: border-box;
          flex-direction: column;
          height: 100%;
          padding: 0 1em;
          position: relative;
          top: 0;
          width: 100%;
        }

        .toolbarButton {
          display: block;
          padding: 1em;
        }

        a.toolbarButton {
          color: inherit;
          text-decoration: none;
        }

        #hamburgerMenuButton {
          height: 24px;
          padding: 1em;
          width: 24px;
        }

        .desktop {
          display: none;
        }

        p {
          margin: 1em;
        }

        @media (min-width: 600px) {
          .mobile {
            display: none;
          }

          .desktop {
            display: inline-block;
          }
        }
      </style>

      <header>
        <elix-hamburger-menu-button id="hamburgerMenuButton" class="mobile">
          <a class="toolbarButton" onclick="closeMenu()" href="javascript:"
            >Home</a
          >
          <a class="toolbarButton" onclick="closeMenu()" href="javascript:"
            >Products</a
          >
          <a class="toolbarButton" onclick="closeMenu()" href="javascript:"
            >Search</a
          >
          <a class="toolbarButton" onclick="closeMenu()" href="javascript:"
            >Account</a
          >
          <a class="toolbarButton" onclick="closeMenu()" href="javascript:"
            >About Us</a
          >
        </elix-hamburger-menu-button>
        <a class="toolbarButton desktop" href="javascript:">Home</a>
        <a class="toolbarButton desktop" href="javascript:">Products</a>
        <a class="toolbarButton desktop" href="javascript:">Search</a>
        <a class="toolbarButton desktop" href="javascript:">Account</a>
        <a class="toolbarButton desktop" href="javascript:">About Us</a>
      </header>

      <p>
        This page uses a responsive design for navigation buttons. At desktop
        window sizes, the buttons appear in a toolbar across the top of the
        page. At smaller mobile window sizes, the buttons appear in a slide-out
        navigation drawer.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit
        amet facilisis augue, sit amet dignissim felis. Curabitur in blandit
        justo. Duis ornare sem vitae enim feugiat, ultrices facilisis velit
        luctus. Aliquam porttitor sollicitudin nibh. Nulla lobortis quam
        venenatis, aliquam risus non, lacinia purus. Nulla a lectus non urna
        suscipit blandit id eget libero. Suspendisse ac bibendum arcu. Nunc
        consequat maximus aliquet. Nullam facilisis purus neque, sit amet
        egestas purus malesuada nec. In luctus tempus diam sit amet egestas.
      </p>
      <p>
        Pellentesque ipsum dolor, consequat ut nunc at, congue semper nisl. Duis
        id cursus orci, sit amet sollicitudin libero. Proin a vehicula neque,
        eget placerat arcu. Nullam ultricies ullamcorper rutrum. Donec nunc
        augue, porttitor in metus sit amet, molestie egestas magna. Donec eget
        neque elementum, feugiat erat eu, sagittis felis. Quisque vitae urna
        rhoncus sapien condimentum suscipit. Cras luctus sollicitudin urna sit
        amet tincidunt. Suspendisse potenti. Fusce pretium libero et augue
        lobortis, quis iaculis est vehicula.
      </p>
      <p>
        Nam varius et mauris dictum consectetur. Nulla venenatis, ante auctor
        scelerisque feugiat, nulla nisl elementum neque, nec facilisis quam erat
        eu orci. Integer rhoncus quam eu neque volutpat, et pulvinar nibh
        suscipit. In laoreet odio et sem bibendum rhoncus. Nunc dictum
        scelerisque gravida. Suspendisse volutpat nibh lectus, sit amet cursus
        ligula ultrices a. Mauris tempor eget risus sed laoreet. Proin fermentum
        lobortis sapien, et ultrices turpis vestibulum a. Morbi mollis nec orci
        at cursus. Nunc euismod neque dui, eu efficitur risus finibus sit amet.
        Duis felis augue, pretium vel felis a, scelerisque hendrerit nibh.
        Mauris efficitur consectetur molestie. Donec ac dolor nec odio mollis
        placerat. Etiam vel sem elementum, luctus nisi ac, volutpat ex.
        Curabitur auctor bibendum placerat. Aenean maximus ante nulla, eget
        vehicula tortor sagittis a.
      </p>

      <script>
        function closeMenu() {
          hamburgerMenuButton.close();
        }
      </script>
    </div>
  </body>
</html>
